<template>
    <div class="demo">
        <c-row>
            <c-col span="4">4</c-col>
            <c-col span="4">4</c-col>
            <c-col span="4">4</c-col>
            <c-col span="4">4</c-col>
            <c-col span="4">4</c-col>
            <c-col span="4">4</c-col>
        </c-row>
        <c-row>
            <c-col span="1">1</c-col>
            <c-col span="2">2</c-col>
            <c-col span="3">3</c-col>
            <c-col span="4">4</c-col>
            <c-col span="5">5</c-col>
            <c-col span="9">9</c-col>
        </c-row>
        <c-row>
            <c-col span="3">3</c-col>
            <c-col span="6">6</c-col>
            <c-col span="7">7</c-col>
            <c-col span="8">8</c-col>
        </c-row>
        <c-row>
            <c-col span="3">3</c-col>
            <c-col span="10">10</c-col>
            <c-col span="11">11</c-col>
        </c-row>
    </div>
</template>

<script>

    export default {
        name: "Grid",
    };
</script>

<style scoped lang="less">
    .demo .c-row {
        height: 50px;
        margin-top: 10px;
    }
    .demo .c-row .c-col {
        text-align: center;
        color: #fff;
        height: 100%;
        line-height: 50px;
        background: @color-base;
    }
    .demo .c-row .c-col:nth-child(odd) {
        background: @color-base-hover;
    }
</style>
